<template>
    <div>
        <!-- 轮播图  -->
        <van-swipe autoplay="false" lazy-render>
            <van-swipe-item v-for="(item, index) in productImgsArr" :key="index">
                <img :src="item" @click="preview(index)" />
            </van-swipe-item>
        </van-swipe>
        <!-- 视频预览组件（预览的组件形式） -->
        <!--播放按钮  -->
        <van-button class="play_btn" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="playVideoFn">
            <van-icon name="play-circle" />
        </van-button>
        <!-- 遮罩弹出层 -->
        <van-popup v-model:show="show" closeable close-icon-position="top-left">
            <video id="video"
                src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
                controls="true" preload="true" webkit-playsinline="false" playsinline="true" x-webkit-airplay="allow"
                x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"
                style="object-fit:fill">
            </video>
        </van-popup>
        <!-- 商品描述 -->
        <div class="describe">
            <h3>￥{{ productArr.originprice }}元</h3>
            <p>
                <van-tag type="danger">自营</van-tag>{{ productArr.proname }}
            </p>
        </div>
        <!-- 底部加入购物车动作栏 -->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartNum" @click="$router.push('/cart')" />
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addcart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup lang="ts">
// 引入图片预览函数
import { ImagePreview } from 'vant';
import { ref, reactive, computed, watch, defineProps, defineEmits, onUpdated } from 'vue'
// 引入商品详情\加入购物车、查看购物车接口
import { productListApi, addCartApi, lookCartApi } from '@/api/detailAPI'
import { useUserStore } from '@/store/useUserStore'
import { useRoute } from 'vue-router'
const route = useRoute()
const UserStore = useUserStore()
// 拿到首页传的商品id
let productID = route.query.itemId
// 定义商品详情数组
let productArr: any = ref([])
// 定义商品详情轮播图数据数组
let productImgsArr = ref([])
let id: any = { proid: productID }
// 调用商品列表接口 
function getpro(value: { proid: string }) {
    productListApi(value).then((res: any) => {
        // console.log(1213214,value);
        // console.log('详情数据',res);
        productArr.value = res.data
        console.log('商品详情', productArr.value);
        productImgsArr.value = res.data.banners[0].split(',')
        console.log('banners', productImgsArr.value);
    })
}
getpro(id)


// 图片预览函数
function preview(index: any) {
    ImagePreview({
        images: productImgsArr.value,//需要预览的图片 URL 数组
        startPosition: index,//图片预览起始位置索引
        closeable: true,//closeable 属性后，会在弹出层的右上角显示关闭图标
    });
}
const show = ref(false);
// 视频播放
function playVideoFn() {
    show.value = true;
}
// 定义当前购物车数量
let cartNum = ref<number>()

// 调用加入购物车接口
interface addcart {
    userid: string,
    proid: string,
    num: string
}
const addcart = () => {
    let values: addcart = {
        userid: UserStore.userid,
        proid: productID,
        num: '1'
    }
    addCartApi(values).then((res: any) => {
        console.log('加入购物车数据', res);
        if (res.code == 200) {

            interface lookCart {
                userid: string,
            }
            let userid: lookCart = {
                userid: UserStore.userid
            }
            // 调用查看购物车数据接口
            lookCartApi(userid).then((res: any) => {
                console.log('查看购物车数据', res);
                // 把当前购物车中的商品个数存放到cartNum用于徽标渲染
                cartNum.value = res.data.length
                console.log('huibiao', cartNum.value);

            })
        }
    })
}

// 调用查看购物车数据接口
// // 定义当前购物车数量
// let cartNum = ref<number>()
interface lookCart {
    userid: string,
}
let userid: lookCart = {
    userid: UserStore.userid
}

lookCartApi(userid).then((res: any) => {
    console.log('查看购物车数据', res);
    // 把当前购物车中的商品个数存放到cartNum用于徽标渲染
    cartNum.value = res.data.length
})




</script>
<style scoped lang="scss">
.van-swipe-item {
    img {
        width: 100%;
        height: 375px;
    }
}

.describe {
    h3 {
        margin: 5px;
        padding: 5px 15px;
        color: #EE0A24;
    }

    p {
        .van-tag {
            margin: 0px 5px;
        }

        margin: 2px;
        padding: 0px 15px;
        font-size: 18px;
    }
}

:deep(.play_btn) {
    position: absolute;
    bottom: 280px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 20px;
    height: 30px;
    width: 40px;
}

.van-popup {
    video {
        width: 100%;
        height: 100%;
    }
}
</style>